<template>
  <PageLayout full>
    <template #header>
      <HeaderLayout show-back :header-style="headerStyle">
        <view>{{ $t('BIWD.FilterReplaceGuide.Navigate.Title') }}</view>
      </HeaderLayout>
    </template>
    <view class="filterbox">
      <view v-for="(item, index) in htmlList" :key="index">
        <view class="guideBox" :class="{ lineBox: index !== 5 }">
          <view class="guideBoxTitle">
            <view class="boxNumber">
              <text>{{ index + 1 }}</text>
            </view>
            <view class="boxTitle" v-if="index === 3">
              <text>{{ $t(item) }}</text>
              <text>将“</text>
              <image class="iconImg" src="@/pages/appliance/static/ic_dian.png"></image>
              <text>”图标与“</text>
              <image class="iconImg" src="@/pages/appliance/static/ic_locked.png"></image>
              <text>”图标对齐 </text>
            </view>
            <view class="boxTitle" v-else>{{ $t(item) }}</view>
          </view>
          <view class="img-box">
            <image
              v-if="brand === 'SIEMENS'"
              class="appImg"
              style="width: 100%"
              :src="`${imgUrl}img_BIWD_Value_SE_ChangeFilter${index + 1}.png`"
              mode="heightFix"
              lazy-load
            ></image>
            <image
              v-else
              class="appImg"
              style="width: 100%"
              :src="`${imgUrl}ChangeFilter${index + 1}_BO_V3.png`"
              mode="heightFix"
              lazy-load
            ></image>
          </view>
        </view>
      </view>
    </view>
  </PageLayout>
</template>
<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import netconfig from '@/config/netconfig'
import { onLoad } from '@dcloudio/uni-app'
const headerStyle = {
  backgroundColor: '#fff',
}
const imgUrl = netconfig.ASSETSPRE_ICONS
const htmlList = [
  'BIWD.FilterReplaceGuide.SpecialSiemensVib.StepOne.Text',
  'BIWD.FilterReplaceGuide.SpecialSiemensVib.StepTwo.Text',
  'BIWD.FilterReplaceGuide.SpecialSiemensVib.StepThree.Text',
  'BIWD.FilterReplaceGuide.SpecialSiemensVib.StepFour.Text',
  'BIWD.FilterReplaceGuide.SpecialSiemensVib.StepFive.Text',
  'BIWD.FilterReplaceGuide.SpecialSiemensVib.StepSix.Text',
]

const brand = ref('')
const isSpecialSiemensVib = ref(false)
const isSpecialBoschVib = ref(false)

onLoad((query: any) => {
  brand.value = query?.brand
  isSpecialSiemensVib.value = query?.isSpecialSiemensVib === 'true'
  isSpecialBoschVib.value = query?.isSpecialBoschVib === 'true'
})
</script>
<style lang="less">
@import '../style/filterReplaceGuide.less';
</style>
